<template>
  <div class="contern">
    <div>
      <div>尊敬的{{ user_name }}先生</div>
      <p>您名下的银行卡有：</p>
    </div>
    <div v-for="item in list">
      <div>
        <h1>{{ item.name }}</h1>
      </div>
      <div class="img_box">
        <img class="ka_img" :src="item.img_url" alt="" />
      </div>
      <div style="margin-bottom: 20px">{{ item.title }}</div>
    </div>
  </div>
</template>

<script setup>
import { computed, onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import { useListStore } from '../stores/counter'

const route = useRoute()
const user_name = route.query.user_name
const user_phone = route.query.user_phone
const ListStore = useListStore()
const list = computed(() => ListStore.list)
onMounted(() => {
  let newlist = list.value
  console.log(newlist)

  console.log(user_name, user_phone) // 确保这里有值
})
</script>
<style>
.contern {
  padding-top: 20px;
  width: 90%;
  margin: 0 auto;
}
.img_box {
  width: 100%;
}
.ka_img {
  width: 90%;
  margin-bottom: 20px;
}
</style>
